<template>
  <a-skeleton active :loading="loading">
  <div class="lg:flex">
    <Avatar :src="headerImg" :size="72" class="!mx-auto !block" />
    <div class="md:ml-6 flex flex-col justify-center md:mt-0 mt-2">
      <h1 class="md:text-lg text-md">{{ title }}, {{ userinfo.realname }}, 开始您一天的工作吧！</h1>
      <span class="text-secondary"> 当前商户：{{businessInfo.name}}
        <span style="margin-left: 40px;">服务公司：{{businessInfo.companyName}}</span>
      </span>
    </div>
    <div class="flex flex-1 justify-end mt-4">
      <div class="search-date">
        <div class="date-label">时间：</div>
        <div class="date-tags">
          <div class="tags-container">
            <div v-for="item in dateTags" :class="item.active == true ? 'tag active' : 'tag'" @click="handleClickDateTag(item)">
              {{item.text}}
            </div>
          </div>
          <div class="cust-range-date" v-if="showRangeDate">
            <a-range-picker showTime="true" v-model:value="searchRangeDate" @change="handleChangeSearchDate" />
          </div>
        </div>
      </div>
    </div>
  </div>
  </a-skeleton>
</template>
<script lang="ts" setup>
  import { computed, reactive, ref } from 'vue';
  import { Avatar } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '/@/assets/images/header.png';

  const emit = defineEmits(["success"]);
  const userStore = useUserStore();
  const userinfo = computed(() => userStore.getUserInfo);
  const title = computed(()=>{
    // 获取当前时间
    let timeNow = new Date();
    // 获取当前小时
    let hours = timeNow.getHours();
    // 设置默认文字
    let text = ``;
    // 判断当前时间段
    if (hours >= 0 && hours <= 10) {
      text = `早上好`;
    } else if (hours > 10 && hours <= 14) {
      text = `中午好`;
    } else if (hours > 14 && hours <= 18) {
      text = `下午好`;
    } else if (hours > 18 && hours <= 24) {
      text = `晚上好`;
    }
    return text;
  });
  const props = defineProps({
    loading: { type: Boolean },
    businessInfo: { type: Object },
  });

  const dateTags = reactive([
    { key: 'jt', text: '今天', active: false },
    { key: 'zt', text: '昨天', active: false },
    { key: 'bz', text: '本周', active: false },
    { key: 'sz', text: '上周', active: false },
    { key: 'by', text: '本月', active: false },
    { key: 'sy', text: '上月', active: false },
    { key: 'zdy', text: '自定义', active: false },
  ]);
  // 查询区域存储值
  const searchParams = reactive({
    rangeDateKey: '',
    rangeDate: [],
  });

  /**
   * 日期查询
   * @param item
   */
  function handleClickDateTag(item) {
    for (let a of dateTags) {
      if(a.key != item.key){
        a.active = false;
      }
    }
    item.active = !item.active;
    if(item.active == false){
      searchParams.rangeDateKey = ''
    }else{
      searchParams.rangeDateKey = item.key;
    }
    if (item.key == 'zdy') {
      // 自定义日期查询走的是 handleChangeSearchDate
      if(item.active == false){
        searchParams.rangeDate = []
        emit("success",searchParams);
      }
    }else{
      emit("success",searchParams);
    }
  }
  const showRangeDate = computed(() => {
    let temp = dateTags.filter((i) => i.active == true);
    if (temp && temp.length > 0) {
      if (temp[0].text == '自定义') {
        return true;
      }
    }
    return false;
  });
  const searchRangeDate = ref([]);

  /**
   * 自定义日期查询
   * @param _value
   * @param dateStringArray
   */
  function handleChangeSearchDate(_value, dateStringArray) {
    searchParams.rangeDate = [...dateStringArray]
    emit("success",searchParams);
  }

</script>
<style lang="less">

.search-date {
  display: flex;
  min-width: 0;
  margin-top: 15px;
  .date-label {
    margin-top: 4px;
    font-weight: 500;
    font-size: 14px !important;
    color: #757575 !important;
    margin-right: 15px !important;
  }

  .date-tags {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    flex: 1;
    -ms-flex: 1;
    .tags-container {
      display: flex;
      min-width: 0;
      -webkit-flex: 1;
      flex: 1;
      -ms-flex: 1;
      flex-wrap: wrap;
      .tag {
        background-color: #f5f5f5;
        border-radius: 17px;
        font-size: 13px;
        margin-bottom: 10px;
        margin-right: 10px;
        padding: 6px 12px;
        cursor: pointer;
        &.active {
          background-color: #d3eafd !important;
          color: #2196f3;
        }
      }
    }
  }
}
</style>
